<template>
	<view class="all">
		<view class="position">
			<image src="../../static/Vector.png" mode=""></image>
			<text class="now-position">当前位置：{{addressList}}</text>
			<text class="Reposition" @tap="getLocation">重新定位</text>
		</view>
		<view class="address">
			<text class="address-ad">送餐地址</text>
			<image src="../../static/Vector (3).png" mode=""></image>
			<text class="address-add" @tap="toNewDeliveAddressAdd">新增</text>
		</view>

		<view v-for="(item, index) in csListArrl" :key="index" :data-index="index" class="order-item"
			@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'">
			<view class="contenttwo" @tap.stop="asd(item)">

				<view class="content">
					<view class="content-detail">
						<view class="content-detail-one">
							<view class="content-detail-address">
								{{item.address}}
							</view>
							<view class="content-detail-name">
								{{item.name}} {{item.phoneNumber}}
							</view>
						</view>
						<view class="content-img" @tap="toNewDeliveAddressUpdate(item)">
							<image src="../../static/Frame (14).png" mode=""></image>
						</view>
					</view>

				</view>

			</view>
			<view class="remove" @click="delData(item)">删 除</view>
index
		</view>


		<view class="button">
			<text class="arrive">送达时间</text>
			<view class="button-one">
				<view class="button-one-img" @tap="getSelectionSoon" v-if="SelectionSoon">
					<image src="../../static/Fill 3.png" mode=""></image>
				</view>
				<view class="button-one-img" @tap="getisSelectionSoon" v-if="!SelectionSoon">
					<image src="../../static/xuanzhong.png" mode=""></image>
				</view>
				<text class="one" v-if="SelectionSoon">尽快送达</text>
				<text class="two" v-if="!SelectionSoon">尽快送达</text>
			</view>
			<view class="button-two">
				<view class="button-two-img" @tap="getAppointmentSelected" v-if="AppointmentSelected">
					<image src="../../static/Fill 3.png" mode=""></image>
				</view>
				<view class="button-two-img" @tap="getisAppointmentSelected" v-if="!AppointmentSelected">
					<image src="../../static/xuanzhong.png" mode=""></image>
				</view>
				<text class="aa-one" v-if="AppointmentSelected">预约送达</text>
				<text class="aa-two" v-if="!AppointmentSelected">预约送达</text>
				<text class="button-choice" @tap="open()">请选择送达时间 ></text>
			</view>

			<text class="yuyue">预约订单中餐品和价格会根据情况实时变化，请以实际情况为准。</text>

		</view>
		<view class="beiji">
			<button form-type="submit" @tap="tomain"><text class="yess">确定</text></button>
		</view>
		<!-- 时间选择弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="time">
				<view class="uni-padding-wrap">
					<view class="uni-title"><text @tap="close()">取消</text><text>请选择预约时间</text><text
							@tap="close()">确认</text></view>
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{month}}月{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getUserAddress,delUserAddress} from "@/api/home.js"
	// import { delUserAddress} from "@/api/home.js"
	export default {
		created() {
			this.getUserAddress()
		},
		data() {
			//时间
			const date = new Date()
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const hours = []
			const hour = date.getHours()
			const minutes = []
			const minute = date.getMinutes()
			for (let i = day; i <= 31; i++) {
				days.push(i)
			}
			for (let i = hour; i <= 23; i++) {
				hours.push(i)
			}
			for (let i = minute; i <= 59; i++) {
				minutes.push(i)
			}
			return {
				//时间
				month,
				days,
				day,
				hours,
				hour,
				minutes,
				minute,
				value: [day - 1, hour - 1, minute - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				

				SelectionSoon: true,
				AppointmentSelected: true,
				//列表数据，可根据自己的业务获取
				csListArrl: [
					// {
					// 	name: '小A',
					// 	age: '18',
					// 	right: 0
					// },
					// {
					// 	name: '小A',
					// 	age: '18',
					// 	right: 0
					// }
				],
				//左滑默认宽度
				delBtnWidth: 80,
				//定位
				qqmapsdk: {},
				provinces: '', //省份
				city: '', //城市
				county: '',
				addressList:'',
				userinformation:""
			}
		},
		methods: {
			// //查询全部商品
			// getData() {
			// 	getAllStore().then(res => {
			// 		console.log("ff", res);
			// 		this.goodsList = res.rows
			// 		this.csListArrl = this.csListArrl.concat(this.goodsList)
			// 		this.csListArrl = this.csListArrl.map(item => {
			// 			if (!item.hasOwnProperty('right')) {
			// 				return {
			// 					...item,
			// 					jia: true,
			// 					right: 0,
			// 					left: 0,
			// 					num: 0
			// 				}
			// 			} else {
			// 				return item
			// 			}
			
			// 		})
			
			// 	})
			// },
			asd(e) {
				console.log(e);
				uni.setStorage({
					key:'address',
					data:e,
				
				})
			},
			//查询用户收餐地址
			getUserAddress(){
				getUserAddress().then(res=>{
					console.log("gg",res);
					this.userinformation = res.rows
					this.csListArrl = this.csListArrl.concat(this.userinformation)
					this.csListArrl = this.csListArrl.map(item => {
						if (!item.hasOwnProperty('right')) {
							return {
								...item,
								jia: true,
								right: 0,
								left: 0,
								num: 0
							}
						} else {
							return item
						}
								
					})
					
					console.log("搜索", this.csListArrl);
					// this.userinformation = res.rows
					
				})
			},
			//时间获取
			bindChange(e) {
				console.log(e);
				const val = e.detail.value
				this.day = this.days[val[0]]
				this.hour = this.hours[val[1]]
				this.minute = this.minutes[val[2]]
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			//定位
			getLocation() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	},
				// 	fail(err) {
				// 		console.log('位置获取失败', err);
				// 	}
				// });

				wx.getSetting({
					success: (res) => {
						console.log(JSON.stringify(res))
						// res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面
						// res.authSetting['scope.userLocation'] == false  表示 非初始化进入该页面,且未授权
						// res.authSetting['scope.userLocation'] == true  表示 地理位置授权
						if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
								'scope.userLocation'] != true) {
							wx.showModal({
								title: '请求授权当前位置',
								content: '需要获取您的地理位置，请确认授权',
								success: function(res) {
									if (res.cancel) {
										wx.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})
									} else {
										wx.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													//再次授权，调用wx.getLocation的API
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
									}
								}
							})
						} else {
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									uni.request({
										url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
											res.latitude + ',' + res.longitude +
											'&key=4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
										method: "GET"
									}).then((res) => {
										console.log('大哥', res);
										
									})
								},
								fail(err) {
									console.log('位置获取失败', err);
								}
							})
						}
					}
				})
			},
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束");
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					console.log(item.right)
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//删除方法
			delData(item) {
				console.log("刚刚",item.addressId);
				delUserAddress(item.addressId).then(res=>{
					console.log("hh",res);
				})
				this.getUserAddress()
			},
			//去新增地址新增
			toNewDeliveAddressAdd() {
				uni.navigateTo({
					url: "/pages/NewDeliveryAddress/NewDeliveryAddress"
				})
			},
			//去新增地址修改
			toNewDeliveAddressUpdate(index) {
				uni.navigateTo({
					url: "/pages/NewDeliveryAddress/NewDeliveryAddress"
				})
			},
			//点击预约
			getSelectionSoon() {
				this.SelectionSoon = false
				if (this.AppointmentSelected == false) {
					this.AppointmentSelected = true
				}
			},
			getisSelectionSoon() {
				this.SelectionSoon = true
			},
			getAppointmentSelected() {
				this.AppointmentSelected = false
				if (this.SelectionSoon == false) {
					this.SelectionSoon = true
				}
			},
			getisAppointmentSelected() {
				this.AppointmentSelected = true
			},
			tomain() {
				uni.switchTab({
					url: "/pages/main/main"
				})
			},
			getLocation() {
				let that = this
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	},
				// 	fail(err) {
				// 		console.log('位置获取失败', err);
				// 	}
				// });

				wx.getSetting({
					success: (res) => {
						console.log(JSON.stringify(res))
						// res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面
						// res.authSetting['scope.userLocation'] == false  表示 非初始化进入该页面,且未授权
						// res.authSetting['scope.userLocation'] == true  表示 地理位置授权
						if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
								'scope.userLocation'] != true) {
							wx.showModal({
								title: '请求授权当前位置',
								content: '需要获取您的地理位置，请确认授权',
								success: function(res) {
									if (res.cancel) {
										wx.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})
									} else {
										wx.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													//再次授权，调用wx.getLocation的API
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
									}
								}
							})
						} else {
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									uni.request({
										url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
											res.latitude + ',' + res.longitude +
											'&key=4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
										method: "GET"
									}).then((res) => {
										// console.log('大哥',  res[1].data.result.address);
										that.addressList = res[1].data.result.address
										console.log("kk",that.addressList);
										
									})
								},
								fail(err) {
									console.log('位置获取失败', err);
								}
							})
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.position {
		width: 100%;
		height: 60rpx;
		background: #FFFFFF;

		image {
			width: 24rpx;
			height: 30rpx;
			margin-top: 14rpx;
			margin-left: 20rpx;
		}

		.now-position {
			display: block;
			height: 24rpx;
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #000000;
			margin-left: 64rpx;
			margin-top: -35rpx;
		}

		.Reposition {
			display: block;
			width: 96rpx;
			height: 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #FB7A42;
			margin-left: 620rpx;
			margin-top: -28rpx;

		}
	}

	.address {
		margin-top: 2rpx;
		height: 60rpx;
		background: #FFFFFF;

		.address-ad {
			display: block;
			width: 96rpx;
			height: 24rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #000000;
			padding-left: 20rpx;
			padding-top: 20rpx;
		}

		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
			margin-left: 620rpx;
			margin-top: -30rpx;
		}

		.address-add {
			display: block;
			width: 48rpx;
			height: 24rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #FB7A42;
			margin-left: 660rpx;
			margin-top: -26rpx;
		}
	}

	.headPortrait {
		width: 100%;
		height: 860rpx;
		background: #FFFFFF;
		margin-top: 16rpx;

		image {
			width: 248rpx;
			height: 249rpx;
			margin-top: 182rpx;
			margin-left: 248rpx;
		}

		.addre {
			display: block;
			width: 336rpx;
			height: 24rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #BFBFBF;
			margin-top: 49rpx;
			margin-left: 206rpx;
		}

		.but {
			width: 562rpx;
			height: 96rpx;
			background: #FB7A42;
			border-radius: 48rpx;
			margin-top: 44rpx;
			margin-left: 94rpx;

			text {
				display: block;
				width: 128rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				margin-left: 216rpx;

			}
		}
	}

	.content {
		width: 750rpx;
		// height: 860rpx;
		background: #FFFFFF;
		margin-top: 12rpx;
		display: flex;
		flex-direction: column;

		.content-detail {
			width: 702rpx;
			height: 180rpx;
			// background-color: #58fb1c;
			margin-left: 24rpx;
			display: flex;

			// flex-direction: column;
			.content-detail-one {
				width: 400rpx;
				height: 180rpx;

				.content-detail-address {
					width: 100%;
					height: 100rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 800;
					font-size: 28rpx;
					line-height: 50rpx;
					text-align: left;
					color: #000000;
				}

				.content-detail-name {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 80rpx;
					text-align: left;
					color: #BFBFBF;
				}
			}

			.content-img {
				width: 33rpx;
				height: 28rpx;
				margin-top: 70rpx;
				margin-left: 230rpx;

				image {
					width: 33rpx;
					height: 28rpx;
					background-size: 100%;

				}
			}
		}
	}


	.button {
		width: 750rpx;
		height: 308rpx;
		background: #FFFFFF;
		margin-top: 16rpx;

		.arrive {
			display: block;
			width: 192rpx;
			height: 24rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 100rpx;
			text-align: center;
			color: #000000;
			margin-left: 28rpx;
		}

		.button-one {
			height: 48rpx;
			width: 702rpx;
			display: flex;
			// background-color: #FB7A42;
			margin-left: 28rpx;
			margin-top: 90rpx;

			.button-one-img {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					background-size: 100%;
				}
			}

			.one {
				width: 96rpx;
				height: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 28rpx;
				color: #BFBFBF;
			}

			.two {
				width: 96rpx;
				height: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 28rpx;
				color: #FB7A42;
			}
		}

		.button-two {
			height: 48rpx;
			width: 702rpx;
			display: flex;
			// background-color: #18fb33;
			margin-left: 28rpx;
			margin-top: 40rpx;

			.button-two-img {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					background-size: 100%;
				}
			}

			.aa-one {
				width: 96rpx;
				height: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 28rpx;
				color: #BFBFBF;
			}

			.aa-two {
				width: 96rpx;
				height: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 28rpx;
				color: #FB7A42;
			}

			.button-choice {
				width: 200rpx;
				height: 48rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 328rpx;

				color: #BFBFBF;
			}
		}

		.yuyue {
			width: 668rpx;
			height: 12rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 12rpx;
			text-align: center;
			color: #BFBFBF;
			margin-left: 28rpx;
		}




	}

	.beiji button {
		width: 750rpx;
		height: 102rpx;
		margin-top: 4rpx;
		background: #FB7A42;

		.yess {
			width: 48rpx;
			height: 24rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #FFFFFF;
		}

	}

	.main {
		width: 100%;
		// height: auto;
		// margin: 10px auto;
		overflow: hidden
	}

	.order-item {
		width: 100%;
		display: flex;
		position: relative;
		margin: 10px auto;
		align-items: right;
		flex-direction: row;
		// background-color: #FB7A42;
	}

	.contenttwo {
		width: 100%;
		height: 180rpx;
		margin: 0 auto;
		// border: 1px solid #C0C0C0;
		line-height: 180rpx;
		text-align: center;
		// background-color: #0862B5;
	}

	.remove {
		margin-left: -5%;
		width: 160rpx;
		height: 180rpx;
		background-color: #0862B5;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
	}

	//时间弹窗
	.uni-title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background-color: white;
		height: 200rpx;
		width: 100%;
		padding: 32rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		// margin-top: 20rpx;
		background-color: white;
	}

	.item {
		height: 100rpx;
		align-items: center;
		justify-content: center;
		line-height: 100rpx;
		text-align: center;
	}
</style>
